* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@primary: #28b9be; // 主要蓝绿色
@primary-light: #4ecdc4;
@primary-dark: #45b7d1;

// 辅助色
@secondary: #96ceb4; // 浅绿色
@danger: #fc2d2d; // 红色
@danger-light: #ff6b6b;

// 灰色与黑白
@white: #fff;
@white-alpha: #ffffffb0;
@white-alpha-2: #ffffff79;
@black: #000;
@black-alpha: #000000a9;
@black-alpha-2: #0003039a;
@gray-bg: #f1f1f1;
@gray-border: #e5e6eb;
@gray-text: #a1a7b3;
@title-color: #0d3d3f;
@text-color: #222;

// 渐变色
@gradient-main: linear-gradient(
  @primary-light 25%,
  @primary-light 50%,
  @primary-dark 50%,
  @primary-dark 75%,
  @secondary 75%
);
@gradient-danger: linear-gradient(
  @danger-light 25%,
  @primary-light 25%,
  @primary-light 50%,
  @primary-dark 50%,
  @primary-dark 75%,
  @secondary 75%
);
@gradient-bg: linear-gradient(#00000015, #00000015, #00000015, #eafafb);
@gradient-white: linear-gradient(transparent, @white);
@gradient-white-2: linear-gradient(transparent 85%, @white);

// 透明色
@color1: #eafafb62;
@color2: #eafafba2;

// 其他
@border-radius: 8px;
@box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

:root {
  background: #eafafb;
  /* 滚动条整体样式 */
  ::-webkit-scrollbar {
    width: 5px; /* 滚动条宽度 */
  }

  /* 滚动条轨道样式 */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道背景颜色 */
  }

  /* 滚动条滑块样式 */
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(
      45deg,
      #4ecdc4 25%,
      #4ecdc4 50%,
      #45b7d1 50%,
      #45b7d1 75%,
      #96ceb4 75%
    );
    border-radius: 5px; /* 滑块圆角 */
  }

  /* 滚动条滑块悬停样式 */
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
      45deg,
      #ff6b6b 25%,
      #4ecdc4 25%,
      #4ecdc4 50%,
      #45b7d1 50%,
      #45b7d1 75%,
      #96ceb4 75%
    );
  }
}
